import { defineStore } from 'pinia';
import { ref } from 'vue';

type QueueMapKey = 'BOOKER_NUMBER' | 'COUPON' | 'DATE' | 'GUEST_NUMBER' | 'POINT' | 'CAR_BOOKER_NUMBER' | 'CAR_DATETIME' | 'CAR_AIRPORT' | 'CAR_HOTEL' | 'CAR_USE_NOTICE' | 'CAR_ORDER_PACKAGE' | 'CAR_REFUND_DETAIL';
type QueueMapValue = (() => void)[];

export const usePopupStore = defineStore('popup', () => {
  const isHidden = ref(false);

  const openQueueMap = ref<Map<QueueMapKey, QueueMapValue>>(new Map());
  const closeQueueMap = ref<Map<QueueMapKey, QueueMapValue>>(new Map());

  function onOpened(key: QueueMapKey, handler: () => void) {
    if (typeof handler === 'function') {
      const queue = openQueueMap.value.get(key);
      if (queue) {
        queue.push(handler);
      } else {
        openQueueMap.value.set(key, [handler]);
      }
    }
  }

  function onClosed(key: QueueMapKey, handler: () => void) {
    if (typeof handler === 'function') {
      const queue = closeQueueMap.value.get(key);
      if (queue) {
        queue.push(handler);
      } else {
        closeQueueMap.value.set(key, [handler]);
      }
    }
  }

  function open(key: QueueMapKey) {
    isHidden.value = true;
    const queue = openQueueMap.value.get(key);
    if (queue) {
      queue.forEach((fn) => fn());
    }
  }

  function close(key: QueueMapKey) {
    isHidden.value = false;
    const queue = closeQueueMap.value.get(key);
    if (queue) {
      queue.forEach((fn) => fn());
    }
  }

  const bookersNumberPickerRef = ref();

  function openBookersNumberPicker() {
    bookersNumberPickerRef.value?.open();
    open('BOOKER_NUMBER');
  }

  function closeBookersNumberPicker() {
    bookersNumberPickerRef.value?.close();
    close('BOOKER_NUMBER');
  }

  const couponPickerRef = ref();

  function openCouponPicker() {
    couponPickerRef.value?.open();
    open('COUPON');
  }

  function closeCouponPicker() {
    couponPickerRef.value?.close();
    close('COUPON');
  }

  const datePickerRef = ref();

  function openDatePicker() {
    datePickerRef.value?.open();
    open('DATE');
  }

  function closeDatePicker() {
    datePickerRef.value?.close();
    close('DATE');
  }

  const guestNumberPickerRef = ref();

  function openGuestNumberPicker() {
    guestNumberPickerRef.value?.open();
    open('GUEST_NUMBER');
  }

  function closeGuestNumberPicker() {
    guestNumberPickerRef.value?.close();
    close('GUEST_NUMBER');
  }

  const pointPickerRef = ref();

  function openPointPicker() {
    pointPickerRef.value?.open();
    open('POINT');
  }
  function closePointPicker() {
    pointPickerRef.value?.close();
    close('POINT');
  }

  const carBookersNumberPickerRef = ref();

  function openCarBookersNumberPicker() {
    carBookersNumberPickerRef.value?.open();
    open('CAR_BOOKER_NUMBER');
  }

  function closeCarBookersNumberPicker() {
    carBookersNumberPickerRef.value?.close();
    close('CAR_BOOKER_NUMBER');
  }

  const carDatetimePickerRef = ref();

  function openCarDatetimePicker() {
    carDatetimePickerRef.value?.open();
    open('CAR_DATETIME');
  }

  function closeCarDatetimePicker() {
    carDatetimePickerRef.value?.close();
    close('CAR_DATETIME');
  }


  const carAirportPickerRef = ref();

  function openCarAirportPicker() {
    carAirportPickerRef.value?.open();
    open('CAR_AIRPORT');
  }

  function closeCarAirportPicker() {
    carAirportPickerRef.value?.close();
    close('CAR_AIRPORT');
  }

  const carHotelPickerRef = ref();

  function openCarHotelPicker() {
    carHotelPickerRef.value?.open();
    open('CAR_HOTEL');
  }

  function closeCarHotelPicker() {
    carHotelPickerRef.value?.close();
    close('CAR_HOTEL');
  }

  const carUseNoticeRef = ref();

  function openCarUseNotice() {
    carUseNoticeRef.value?.open();
    open('CAR_USE_NOTICE');
  }

  function closeCarUseNotice() {
    carUseNoticeRef.value?.close();
    close('CAR_USE_NOTICE');
  }

  const carOrderPackageRef = ref();

  function openCarOrderPackage() {
    carOrderPackageRef.value?.open();
    open('CAR_ORDER_PACKAGE');
  }

  function closeCarOrderPackage() {
    carOrderPackageRef.value?.close();
    close('CAR_ORDER_PACKAGE');
  }

  const carRefundDetailRef = ref();

  function openCarRefundDetail() {
    carRefundDetailRef.value?.open();
    open('CAR_REFUND_DETAIL');
  }

  function closeCarRefundDetail() {
    carRefundDetailRef.value?.close();
    close('CAR_REFUND_DETAIL');
  }

  function init() {
    isHidden.value = false;
  }

  return {
    isHidden,
    onOpened,
    onClosed,
    init,

    // Bookers Number Picker
    bookersNumberPickerRef,
    openBookersNumberPicker,
    closeBookersNumberPicker,

    // Coupon Picker
    couponPickerRef,
    openCouponPicker,
    closeCouponPicker,

    // Date Picker
    datePickerRef,
    openDatePicker,
    closeDatePicker,

    // Guest Number Picker
    guestNumberPickerRef,
    openGuestNumberPicker,
    closeGuestNumberPicker,

    // Point Picker
    pointPickerRef,
    openPointPicker,
    closePointPicker,

    // Car Bookers Number Picker
    carBookersNumberPickerRef,
    openCarBookersNumberPicker,
    closeCarBookersNumberPicker,

    // Car Datetime Picker
    carDatetimePickerRef,
    openCarDatetimePicker,
    closeCarDatetimePicker,

    // Car Airport Picker
    carAirportPickerRef,
    openCarAirportPicker,
    closeCarAirportPicker,

    // Car Hotel Picker
    carHotelPickerRef,
    openCarHotelPicker,
    closeCarHotelPicker,

    // Car Use Notice
    carUseNoticeRef,
    openCarUseNotice,
    closeCarUseNotice,

    // Car Order Package
    carOrderPackageRef,
    openCarOrderPackage,
    closeCarOrderPackage,

    // Car Refund Detail
    carRefundDetailRef,
    openCarRefundDetail,
    closeCarRefundDetail,
  };
});
